<template>
	<view class="goshop-info-container">
		<view class="goshop-info-head"></view>
		<view class="goshop-info-evaluate">
			<view class="goshop-info-evaluate-box">
				{{orderData.status | statusName(that)}}
			</view>
		</view>
		<view class="goshop-info-good">
			<view class="goshop-info-good-box">
				<view class="goshop-info-good-box-left">
					<view><image class="goshop-img-62" :src="orderData.goodInfo.thumbnail"></image></view>
				</view>
				<view class="goshop-info-good-box-right">
					<view>{{orderData.goodInfo.name}}</view>
					<view class="u-m-t-10 price-color">{{moneyText}}{{orderData.goodInfo.price}}</view>
				</view>
			</view>
			<view class="base-font-size goshop-info-good-footer text-color-two text-color-primary">
				{{complaintText}}
			</view>
		</view>
		<view class="goshop-info-address">
			<view class="lg-font-size font-bold">{{deliveryinformationText}}</view>
			<view class="goshop-info-address-head u-m-t-10">
				<view class="goshop-info-address-head-left">{{orderData.receiptInfo.name}} {{orderData.receiptInfo.mobile}}</view>
				<view class="text-color-two row-cen-cen"><view class="iconfont iconfont-copy" @tap="onCopy(orderData.receiptInfo.mobile)"></view>{{copyText}}</view>
			</view>
			<view class="goshop-info-address-bottom" v-if="locale === 'zh-Hans'">
				{{orderData.receiptInfo.province}}-{{orderData.receiptInfo.city}}-{{orderData.receiptInfo.area}}<view class="u-m-l-10">{{orderData.receiptInfo.address}}</view>
			</view>
		</view>
		<view class="goshop-info-order">
			<view class="lg-font-size font-bold">{{informationText}}</view>
			<view class="text-color-two u-m-t-10">{{timeText}}：{{orderData.createTime}}</view>
			<view class="goshop-info-order-sn">
				<view class="goshop-info-order-sn-left text-color-two">{{numberingText}}：{{orderData.orderSn}}</view>
				<view class="goshop-info-order-sn-right text-color-two row-cen-cen"><view class="iconfont iconfont-copy" @tap="onCopy(orderData.orderSn)"></view>{{copyText}}</view>
			</view>
			<view class="text-color-two">{{remarkText}}：{{orderData.msg}}</view>
		</view>
		<view class="goshop-info-logistics">
			<view class="lg-font-size font-bold">{{logisticsText}}</view>
			<view class="text-color-two u-m-t-10" v-if="orderData.type === 2">{{withoutlogisticsText}}：{{orderData.remark}}</view>
			<view class="text-color-two u-m-t-10" v-else>
				<view>{{expressdeliveryText}}：{{orderData.orderLogisticsInfo.logisticsCompany}}</view>
				<view>{{singlenumberText}}：{{orderData.orderLogisticsInfo.logisticsSn}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {orderInfo} from '@/common/http.api.js'
	import {isEmpty,handleClipboard} from '@/utils/utils';
	export default {
		data() {
			return {
				id:'',
				orderData:{
					goodInfo:{
						thumbnail:'',
					},
					receiptInfo:{
						name:'',
					},
					orderLogisticsInfo:{
						logisticsCompany:'',
					}
				},
				copysuccessfullyText:'',
				withoutlogisticsText:'',
				complaintText:'',
				timeText:'',
				logisticsText:'',
				clipboardText:'',
				numberingText:'',
				informationText:'',
				singlenumberText:'',
				deliveryinformationText:'',
				expressdeliveryText:'',
				remarkText:'',
				replicationfailedText:'',
				copyText:'',
				moneyText:'',
				locale:'',
				that:this,
				orderStatusDict:{
					10:this.$t('order.pendingpayment.text'),
					11:this.$t('order.tobeshipped.text'),
					12:this.$t('order.pendingreceipt.text'),
					13:this.$t('order.comment.text'),
					14:this.$t('order.aftersale.text'),
					0:this.$t('order.pendingreview.text'),
					5:this.$t('order.closed.text'),
					100:this.$t('order.completed.text'),
				},
			};
		},
		filters: {
			statusName(val,that) {
				return that.orderStatusDict[val];
			}
		},
		onLoad(e){
		   if(e.id){
			  this.id=e.id;
			  this.getOrderInfo();
		   }
		},
		onShow(){
		   this.refresh();	
		   this.locale = this.$i18n.locale;
		},
		methods:{
			refresh(){
				this.moneyText = this.$t('common.money.text');
				this.copysuccessfullyText = this.$t('orderinfo.copysuccessfully.text');
				this.withoutlogisticsText = this.$t('orderinfo.withoutlogistics.text');
				this.complaintText = this.$t('orderinfo.complaint.text');
				this.timeText = this.$t('orderinfo.time.text');
				this.logisticsText = this.$t('orderinfo.logistics.text');
				this.clipboardText = this.$t('orderinfo.clipboard.text');
				this.numberingText = this.$t('orderinfo.numbering.text');
				this.informationText = this.$t('orderinfo.information.text');
				this.singlenumberText = this.$t('orderinfo.singlenumber.text');
				this.deliveryinformationText = this.$t('orderinfo.deliveryinformation.text');
				this.expressdeliveryText = this.$t('orderinfo.expressdelivery.text');
				this.remarkText = this.$t('orderinfo.remark.text');
				this.replicationfailedText = this.$t('orderinfo.replicationfailed.text');
				this.copyText = this.$t('orderinfo.copy.text');
			},
			onCopy(number){
				let that = this;
				    //#ifdef APP-PLUS
					uni.setClipboardData({
						data: number,
						success: function () {
							uni.showModal({
								title: that.copysuccessfullyText,
								content: that.clipboardText, 
								showCancel:false,
								success: function(res) {
									if (res.confirm) {											 
										//console.log('用户点击确定');
									} else if (res.cancel) {
										//console.log('用户点击取消');
									}
								}
							});
						}
					});
				// #endif
				// #ifdef H5
				handleClipboard(number, event, () => {
						uni.showToast({
							icon: 'none',
							title: that.clipboardText
						})
					  }, () => {
						uni.showToast({
							icon: 'none',
							title: that.replicationfailedText
						})
				})
				// #endif
			},
			getOrderInfo(){
				orderInfo({params:{id:this.id}}).then(res => {
					if (res.code === 0) {
						this.orderData = res.data;
						debugger
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.goshop-info-container{
	.goshop-info-head{
		height: 90rpx;
		background-color: $goshop-color-primary;
	}
	.goshop-info-evaluate{
		padding: 20rpx;
		position: absolute;
		top: 20rpx;
		left: 0;
		right: 0;
		.goshop-info-evaluate-box{
			background-color: $goshop-color-auxiliary-one;
			padding: 20rpx;
			border-radius: 20rpx;
			height: 60rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}
	.goshop-info-good{
		margin-top: 20rpx;
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;
		margin-top: 80rpx;
		.goshop-info-good-box{
			padding: 20rpx 0px;
			border-bottom: 2rpx solid $goshop-text-color-four;
			display: flex;
			.goshop-info-good-box-left{
				
			}
			.goshop-info-good-box-right{
				flex: 3;
				padding: 20rpx;
			}
		}
		.goshop-info-good-footer{
			padding: 20rpx 0;
		}
	}
	.goshop-info-address{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: $goshop-color-auxiliary-one;
		margin-top: 20rpx;
		.goshop-info-address-head{
			display: flex;
			.goshop-info-address-head-left{
				flex: 3;
			}
		}
		.goshop-info-address-bottom{
			display: flex;
		}
	}
	.goshop-info-order{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: $goshop-color-auxiliary-one;
		margin-top: 20rpx;
		.goshop-info-order-sn{
			display: flex;
			.goshop-info-order-sn-left{
				flex: 3;
			}
			.goshop-info-order-sn-right{
				
			}
		}
	}
	.goshop-info-logistics{
		padding: 20rpx;
		background-color: $goshop-color-auxiliary-one;
		margin-top: 20rpx;
	}
}
</style>
